<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>草原带管理管理</title>
	<meta name="decorator" content="default"/>
	<script src="${ctxStatic}/jquery/addel.jquery.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			//$("#name").focus();
			$("#inputForm").validate({
				submitHandler: function(form){
					loading('正在提交，请稍等...');
					form.submit();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
			$('.addel').addel({
				classes: {
					target: 'target'
				},
				animation: {
					duration: 300
				}
			}).on('addel:delete', function (event) {
				if (window.confirm('确定要删除吗' + '"' + event.target.find(':input').val() + '"?')) {
	                $.ajax({
	                    //提交数据的类型 POST GET
	                    type:"POST",
	                    //提交的网址
	                    url:"${ctx}/grasscoverage/grassCoverage/deletebyid?id=" + event.target.find(':input').val(),
	                    contentType: "application/json; charset=utf-8",   //内容类型
	                    //提交的数据
	                    //data:{id:event.target.find(':input').val()},
	                    //返回数据的格式
	                    datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
	                    //在请求之前调用的函数
	                    beforeSend:function(){loading('正在删除，请稍等...');},
	                    //成功返回之后调用的函数
	                    success:function(data){
	                        if(data.code == '0000')
	                        {
	                        	closeLoading();
	                        	event.preventDefault();
	                        }

	                    },
	                    //调用执行后调用的函数
	                    complete: function(XMLHttpRequest, textStatus){
	                    },
	                    //调用出错执行的函数
	                    error: function(){
	                        //请求出错处理
	                        alertx("请求异常",closed);
	                    }
	                });	
					
				}
			});			
		});
	</script>
</head>
<body>
	<form:form id="inputForm" modelAttribute="sysGrassBelt" action="${ctx}/grassbelt/sysGrassBelt/save" method="post" class="readcrumb form-search">
		<div style="padding-left: 40px;text-align:center;height:166px">
			<label>图片：</label>
					<form:hidden id="standImg" path="standImg" htmlEscape="false" maxlength="255" class="input-xlarge"/>
					<sys:ckfinder input="standImg" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100" maxHeight="100"/>
		</div>	
		<form:hidden path="id"/>
		<ul class="ul-form" style="padding-top:10px">
				<li><label>经度：</label>
					<form:input path="lon" htmlEscape="false" maxlength="20" class="input-xlarge " style="width:100px" />
				</li>
				<li><label>纬度：</label>
					<form:input path="lat" htmlEscape="false" maxlength="20" class="input-xlarge " style="width:100px"/>
				</li>	
				<li class="clearfix"></li>	
				<li><label>名称：</label>
					<form:input path="name" htmlEscape="false" maxlength="60" class="input-xlarge " style="width:100px"/>
				</li>	
				<li><label>草地类型：</label>
					<sys:treeselect id="grasstype" name="grasstypeid" value="${sysGrassBelt.grasstype.id}" labelName="grasstype.name" labelValue="${sysGrassBelt.grasstype.name}"
					title="父类型" url="/grasstype/grassType/treeData" extId="${sysGrassBelt.grasstype.id}" cssClass="" allowClear="true" cssStyle="width:140px"/>	
				</li>				
				<li class="clearfix"></li>	
				<li><label>高度月份：</label>
					<form:select id="month" path="month" class="input-medium">
						<form:option value="5" label="5"/><form:options items="${monthList}" htmlEscape="false"/>
					</form:select>
					(以下盖度值是几月份的)
				</li>	
				<li class="clearfix"></li>	
				<div class="addel">	
				<c:if test="${empty sysGrassBelt.grassCoverageList}">
					<div class="form-group target">
						<div class="input-group">
							<li>
								<input name="coverageid" value="" type="hidden">
								<label>盖度：</label><input type="number" name="coverage" class="form-control" value="0" style="width:85px;margin-left: 4px;">%
								<label>产量：</label><input type="number" name="production" class="form-control" value="0" style="width:70px;margin-left: 4px;">
									<button type="button" class="btn btn-danger addel-delete"><i class=" icon-remove-sign"></i>
									</button>公斤/亩
							</li>
						</div>	
					</div>					
				</c:if>
				<c:forEach items="${sysGrassBelt.grassCoverageList}" var="grasscoverage">
					<div class="form-group target">
						<div class="input-group">
							<li>
								<input name="coverageid" value="${grasscoverage.id}" type="hidden">
								<label>盖度：</label><input type="number" name="coverage" class="form-control" value="${grasscoverage.coverage}" style="width:85px;margin-left: 4px;">%
								<label>产量：</label><input type="number" name="production" class="form-control" value="${grasscoverage.production}" style="width:70px;margin-left: 4px;">
									<button type="button" class="btn btn-danger addel-delete" ><i class=" icon-remove-sign"></i>
									</button>公斤/亩
							</li>
						</div>
					</div>	
				</c:forEach>						
					<button type="button" class="btn btn-success  addel-add"><i class="icon-plus"></i></button>							
				</div>
									
		</ul>

	</form:form>
</body>


</html>